Starhotel

About Starhotel

First off all, thank you for purchasing Starhotel - HTML template! This template is ideal for hotels that want  to have a modern responsive website. This document explains the installation of Starhotel and should be the answer to the most frequent problems and issues. Please feel free to contact customer support, if you're experiencing any issues or problems beyond the scope of this document.

HTML Structure

Framework and Grid System

Bootstrap is the framework of Starhotel. It's currently the most popular framework, because it's clean, stable and easy to work with. The starhotel grid is based upon the 1170px grid divided into twelve columns. You can easily edit the pages or create new ones. Please read the bootstrap documentation if you don't know how the framework works.  

 

General

This is the general HTML of Starhotel:


<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <title>Starhotel</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <link rel="shortcut icon" href="favicon.ico">
  <!-- Stylesheets -->
  <!-- Javascripts -->
</head>

<body>
  <!-- Top header -->
  <div id="top-header"> </div>

  <!-- Header -->
  <header> 
    <!-- Navigation --> 
  </header>

  <!-- Parallax Slider -->
  <section class="parallax-slider"> 
    <!-- Title section --> 
  </section>

  <!-- Content -->
  <section>
    <div class="container">
    <div class="row">
      <div class="col-md-12"> 
        <!-- Content here --> 
      </div>
    </div>
  </section>

  <!-- Footer -->
  <footer> 
    <!-- Footer section -->
    <div class="footer-bottom"> 
      <!-- Footer bottom --> 
    </div>
  </footer>

  <!-- Go-top Button -->
  <div id="go-top"><i class="fa fa-angle-up fa-2x"></i></div>

</body>
</html>

 

Navigation

The navigation is based on the basic Bootstrap navigation. Starhotel also makes use of the Yamm! Megamenu extension. To find out more go to http://geedmo.github.io/yamm/

 

Change boxed and wide layout 

Changing the wide to boxed layout style is simple. The standard layout style is wide. To go boxed, just wrap all HTML inside the body tag in a div called boxed and you're done. See example:

<body>
  <div class="boxed">
    <!-- Top header -->
    <!-- Header -->
    <!-- Parallax Slider -->
    <!-- Content -->
    <!-- Footer -->
    <!-- Go-top Button -->
  </div>
</body>

 

Patterns and backgrounds

Make sure the layout style has been set to boxed. You can configure a pattern by adding a pattern class to the body, example:

<body class="pattern-1">
  <div class="boxed">
    <!-- Top header -->
    <!-- Header -->
    <!-- Parallax Slider -->
    <!-- Content -->
    <!-- Footer -->
    <!-- Go-top Button -->
  </div>
</body>
It's also possible to add a background, make sure pattern isn't on and that the layout style is set to boxed. You can set the background image by inserting an image and give it the ID 'background-image', see example:
<body>
  <!-- Background image -->
  <img src="images/background/1200x800.gif" id="background-image" alt="background image">
  <div class="boxed"> 
    <!-- Top header --> 
    <!-- Header --> 
    <!-- Parallax Slider --> 
    <!-- Content --> 
    <!-- Footer --> 
    <!-- Go-top Button --> 
  </div> 
</body>
 
 

CSS Files and Structure

The following stylesheets are used in this template:

 

Change theme color

There are eight predefined color combinations for Starhotel: black, blue, brown, green, orange, purple, red and turqoise. Creating your own is easy by copying the stylesheet and changing the colors. You can also use one of the predefined colors:

<link rel="stylesheet" href="css/colors/turquoise.css">
 

 

JavaScript

Starhotel makes use of the following JS files:

 

Documentation

Please check the plug-ins documentation if you're in need of further detail. Original documentation of the plug-ins can be found here:

 

Fonts

Fonts

The main font of Starhotel is Open Sans. 

To change the font, follow these steps:
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600,700">

Icons

Starhotel makes use of the Fontawesome icon pack. It includes over 369 retina ready icons. To use an icon follow these steps:

<i class="fa fa-iconname fa-5x">

For a more detailed description about the icons, visit: http://fontawesome.io/icons/

Sliders

Revolution Slider

Please read the full documentation in 'revolution slider documentation' folder.

 

Owl Carousel

The Owl Carousel is used for multiple purposes: reviews, room-slider and a standard-slider. You can easily edit the width of the slider by changing the Bootstrap column wrapped around it. Here is an example of the room slider:  

<section class="standard-slider room-slider">
  <div class="col-sm-12 col-md-8">
    <div id="owl-standard" class="owl-carousel">
      <div class="item"> <a href="images/rooms/slider/room-slider-02.jpg" data-rel="prettyPhoto[gallery1]"><img src="images/rooms/slider/room-slider-02.jpg" alt="Image 2" class="img-responsive"></a>
      </div>
      <div class="item"> <a href="images/rooms/slider/room-slider-02.jpg" data-rel="prettyPhoto[gallery1]"><img src="images/rooms/slider/room-slider-02.jpg" alt="Image 2" class="img-responsive"></a>
      </div>
   </div>
  </div>
</section>

Animations

It's possible to animate almost anything you want. 
You can find preview animations that you can use here: http://daneden.github.io/animate.css.

Start animating by adding a HTML animation class from the link. 
Next you can set the timer(data-start) in milliseconds. 
To first hide and after appear your target, add the class 'appear'.
 
Here is an example of an animation:
<div class="col-sm-3 bounceIn appear" data-start="300">
 

 

Parallax

For the Parallax effect you need a little bit of JavaScript combined with a little bit of HTML and CSS. First you have to define the Div ID in the JavaScript. Next you change the properties:
xPosition: Horizontal position of the element 
Speedfactor: speed to move relative to vertical scroll. Example: 0.1 is one tenth the speed of scrolling, 2 is twice the speed of scrolling
 
Now you add a Div with the same ID used in the JavaScript line and insert an inline CSS code to add a background image. Example:
<!-- Parallax Effect --> 
<script type="text/javascript">$(document).ready(function(){$('#parallax-pagetitle').parallax("50%", -0.55);});</script>

<section class="parallax-effect">
  <div id="parallax-pagetitle" style="background-image: url(./images/parallax/1900x911.gif);">
  </div>
</section>

Configurations

Reservation Form

In order to use the reservation form, you should have an e-mailadres ready where you'll receive all the requested reservations. To configure this emailadres, follow these steps:

To change the number of adults/children that the booker can pick from, simply add a new option with a new value number. See example:

<select name="adults" id="adults" class="form-control">
  <option value="1">1 adult</option>
  <option value="2">2 adults</option>
  <option value="3">3 adults</option>
  <option value="4">4 adults</option>
</select>

Contact Form

In order to use the contact form, you should have an e-mailadres ready where you'll receive all the sent messages.  To configure the contactform, follow these steps:

Add new fields to form(s)

This is a short tutorial about adding a new field to the form. In this case we'll add a phone number to the reservation form. 

<div class="form-group">
<label for="phone">Phone</label>
<input name="phone" type="text" id="phone" value="" class="form-control" placeholder="Please enter your phone number"/>
</div>
action="php/reservation.php"

$phone = $_POST['phone'];
else if (trim($phone) == '')          {

echo '<div class="alert alert-danger alert-dismissable">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>Attention! Please enter your phone number.</div>';
exit();
}
The customers phone number is: $phone
Testing the forms locally requires a installed server environment that is able to send emails. There is a big chance you don't have such a setup on your computer, so testing the form online is required most of the time.

Google Maps

Follow these steps to setup the Google Maps plug-in.

PSD Files

2 basic PSD files are included into this download. The following pages where designed:

Please note that all PSD files are layered and organized into folders. The grid is based upon the Twitter Bootstrap grid. And all icons where used from fontAwesome.

Sources and Credits

Starhotel used the following plug-ins, images, icons or other files as listed.

 

jQuery Plug-ins

 

CSS Plug-ins

 

Images

Images in the demo are downloaded from: http://www.photodune.net and www.thinkstockphotos.com Please contact if you want to purchase a specific image used in the preview version.

 

Icons

- Fontawesome

 

Fonts

- Google Fonts 
 

 

HTML/CSS Framework

- Bootstrap

Once again, thank you for purchasing this theme. Starhotel has been a huge project and has been tested on all kind of browsers, devices, people, but off course you can run into problems. If that is the case please contact us, so help can be provided! If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.

Slashdown